<html>
<head>
<title>Image Browser</title>
<link rel='stylesheet' media='all' href='file://<%= RESOURCES_DIR %>/browser.css' />
<script type='text/javascript'>
var orig_w = 0
var orig_h = 0

scales_pct = [10, 20, 50, 100, 200, 500, 1000]
scales_txt = ['0.1x', '0.2x', '0.5x', '1x', '2x', '5x', '10x']

function scaleImage(value) {
	var zoom = document.getElementById('zoom')
	var pp = document.getElementById('preview_pane')
	var pimg = document.getElementById('previewImage')
	var pp_width = pp.clientWidth
	var pp_height = pp.clientHeight
	var pimg_orig_width = orig_w
	var pimg_orig_height = orig_h
	
	var pimg_width_n = parseInt((orig_w*scales_pct[value])/100)
	var pimg_height_n = parseInt((orig_h*scales_pct[value])/100)
	
	pimg.style.width = pimg_width_n + "px"
	pimg.style.height = pimg_height_n + "px"
	
	pimg.style.left = ((pp_width/2) - (pimg_width_n/2))+'px'
	pimg.style.top = ((pp_height/2) - (pimg_height_n/2))+'px'
	zoom.innerHTML = scales_txt[value] + ' (' + pimg.clientWidth + " &times; " + pimg.clientHeight + ')'
	pp.style.overflow = 'auto'
}

function displayImage(path) {
	var path = 'file://<%= PROJECT_ROOT %>/'+path
	var zoom = document.getElementById('zoom')
	var p_img = document.getElementById('previewImage')
	
	p_img.src = path
	p_img.style.height = 'auto'
	p_img.style.width = 'auto'
	orig_w = p_img.clientWidth
	orig_h = p_img.clientHeight
	document.getElementById('slider').value=3
	document.getElementById('slider').disabled=false
	scaleImage(3)
}
function insert(text) {
	// Ripped shamelessly from Max Williams. Thanks.
	TextMate.system("osascript -e 'tell app \"TextMate\" to insert \""+text+"\"' &", null)
	window.close();
}
function filter_results(search) {
	str = search.value
	results = document.getElementById('results')
	count = 0
	for (i = 0; i < images.length; i++) {
		if (-1 == images[i].search(str)) {
			document.getElementById("item_"+i).style.display = 'none'
		} else {
			count++
			document.getElementById("item_"+i).style.display = 'block'
		}
	}
	results.innerHTML = (str) ? count + ' Found' : ''
}
var images = []
</script>
</head>

<body onload='document.getElementById("search").focus()'>
<div id='filter'>
	<div>Filter results: <input type='search' id='search' onkeyup="filter_results(this)" onsearch='filter_results(this)' /> <span id='results'></span></div>
</div>
<div id='list_box'>
<% Dir.chdir(PROJECT_ROOT) %>
<% Dir.glob("**/*.{gif,png,jpg,jpeg}").each_with_index do |f, i| %>
	<script type="text/javascript">
		images[<%= i %>] = '<%= f.gsub("'", "\'") %>';
	</script>
	<a href='#' class='item' onclick='displayImage("<%= f %>"); return false;' id='item_<%= i %>'>
	<img src='file://<%= PROJECT_ROOT %>/<%= f %>' class='thumb' onclick='insert("<%= f %>")' title='Insert path' />
	<div class='filename'><%= f %></div>
	<div class='details'>
	<span>
	<% File.open(f, "rb") do |fh|
			begin
				img = ImageSize.new(fh.read) %>
				<%= img.get_width %> &times; <%= img.get_height %>
		<% rescue %>
			Dimensions not available
		<% end %>
	<% end %>
	</span>
	</div>
	</a>
<% end %>
</div>

<div id='preview_box'>
	<div id='preview_pane'><img id='previewImage' src='' /></div>
	<div id='controls_box'>
		<input id="slider" type="range" min="0" max="6" value="3" disabled="disabled" oninput="scaleImage(this.value)" /> <div id="zoom"></div>
	</div>
</div>
</body>
</html>
